前回紹介したshadowフィルタは、文字やボタンに影を付ける場合にも活用できます。そこで、今回はshadowフィルタを使用し、「影付き文字」や「影付きボタン」を手軽に作成する方法を紹介しましょう。

	「影付き文字」を作成する場合は、その文字をDVDタグで挟み、DIVタグに対してshadowフィルタを適用します。これで「DIV」〜「/DIV」の文字に対して影を付けることができます。このとき、影を付けるための余白（padding）を指定するのを忘れないでください。また、widthでDIVタグの横幅を指定しておく必要もあります。これを忘れると正しく影が表示されません。注意してください。 <DIV style="padding:15px; width:100%; filter:shadow (color=#FF6666,direction=315,strength=10);"> <FONT size="7">影のある文字</FONT> </DIV>

TABLEタグに対してshadowフィルタを適用すると、サンプルに示したような「切り抜きボタン」を手軽に作成できます。この場合、影を表示するための余白は、TABLEタグのcellpadding属性でも指定できます。ホームページを飾るワンポイントとして活用してみると面白いでしょう。 <TABLE border="5" cellpadding="15" style="filter:shadow(color=#BBBBBB,direction=135,strength=10);"> <TR> <TD width="80" align="center"><B>自己紹介</B></TD> <TD width="80" align="center"><B>写真集</B></TD> <TD width="80" align="center"><B>日記</B></TD> <TD width="80" align="center"><B>リンク</B></TD> </TR> </TABLE>

影付きのボタンを作成する場合は、TABLEタグを「DIV」〜「/DIV」で挟み、DIVタグに対してshadowフィルタを適用します。この場合も、widthでDIVタグの横幅を指定するのを忘れないようにしてください。TABLEタグでは、border属性、cellpadding属性、cellspacing属性でボタンの間隔や罫線を指定します。さらに、スタイルシートのmarginで影を表示するための余白を設けておきます。あとは、各TDタグにbgcolor属性で背景色を指定すると、サンプルのような「影付きボタン」を作成できます。 <DIV style="width:100%; filter:shadow(color=#BBBBBB,direction=135,strength=5)"> <TABLE border="0" cellpadding="5" cellspacing="15" style="margin:15px"> <TR> <TD align="center" bgcolor=#000099> <FONT color="#FFFFFF"><B>ボタンA</B></FONT> </TD> <TD align="center" bgcolor=#000099> <FONT color="#FFFFFF"><B>ボタンA</B></FONT> </TD> </TR> </TABLE> </DIV>

G�|�C���g�|�C���@Amazon Yahoo �y�V

�����z�[���y�[�W �y�V���o�C��[UNLIMIT��������1�~] �C�O�i���q���� �C�O���s�����������I